<template>
  <KView class="phone-num-view clearfix">
    <KView>{{prefixNum}}</KView>
    <sys-svg v-for="num in count" :key="`num_${num}`" name="heart" color="#EF8383"></sys-svg>
    <KView>{{suffixNum}}</KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      phoneNum: {
        type: String,
        required: true
      }
    },

    data() {
      let phoneNum = this.phoneNum;
      let prefixNum = phoneNum.substr(0, 3);
      let suffixNum = phoneNum.substr(-4);
      return {
        prefixNum,
        suffixNum,
        count: 4
      };
    },

    components: {
      SysSvg
    }
  };

</script>

<style lang="scss">
  .phone-num-view {
    >div {
      float: left;
    }

    .sys-svg {
      width: formatPx(20);
      margin: 0 formatPx(2);
    }
  }

</style>
